<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>应用</title>

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css">

        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

        <!--导入布局js，共享header和footer-->
        <script type="text/javascript" src="js/include.js"></script>
    </head>

    <script src="js/getParameter.js"></script>


    <script>
        var msg = "";
        $(function () {
            //查询用户信息
            $.get("user/findOne", {}, function (data) {
                //{uid:1,name:'李四'}

                $("#username").val(data.username);
                $("#email").val(data.email);
                $("#realname").val(data.realname);
                $("#telephone").val(data.telephone);
                $("#birthday").val(data.birthday);

                var sex = data.sex;
                if (sex == "male") {
                    $("#sex1").attr("checked", 'checked');
                    // $('input:radio').attr('onClick',"javascript:return false");  单选框只读不可修改
                    $('input:radio').attr('onClick', "javascript:return false");
                } else if (sex == "female") {
                    $("#sex2").attr("checked", 'checked');
                    $('input:radio').attr('onClick', "javascript:return false");
                }

            });


        });

        $(function () {
            $("#update_sub").click(function () {
                $("#username").removeAttr("readonly");
                $("#email").removeAttr("readonly");
                $("#realname").removeAttr("readonly");
                $("#telephone").removeAttr("readonly");
                $("#birthday").removeAttr("readonly");
                $('input:radio').attr('onClick', "javascript:return true");
                $("#usub").removeAttr("disabled");
            })
        })

    </script>

    <script>
        /*
            表单校验：
                1. 用户名：单词字符，长度8-20位
                2. 密码：单词字符，长度8-20位
                3. email：邮箱格式
                4. 姓名：非空
                5. 手机号：手机号格式
                6. 出生日期：非空
                7. 验证码：非空
         */

        //校验用户名
        function checkUsername() {
            // alert("校验用户名")
            //1.获取用户名值
            var username = $("#username").val();
            //2.定义正则
            var reg_username = /^\w{8,20}$/;

            //3.判断，给出提示信息
            var flag = reg_username.test(username);
            if (flag) {
                //用户名合法
                $("#username").css("border", "");
                $("#eemsg").html("");
            } else {
                //用户名非法
                $("#username").css("border", "1px solid red");
                $("#eemsg").html("用户名不合法，要求单词字符，长度8-20位");
            }
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1.获取密码的值
            var password = $("#password").val();
            //2.定义正则
            var reg_password = /^\w{8,20}$/;

            //3.判断，给出提示信息
            var flag = reg_password.test(password);
            if (flag) {
                //密码合法
                $("#password").css("border", "");
                $("#eemsg").html("");
            } else {
                //密码非法
                $("#password").css("border", "1px solid red");
                $("#eemsg").html("密码不合法，要求单词字符，长度8-20位");
            }
            return flag;
        }

        //校验邮箱
        function checkEmail() {
            //1.获取邮箱的值
            var email = $("#email").val();
            //2.定义正则
            var reg_email = /^\w+@\w+\.\w+$/;
            //3.判断，给出提示信息
            var flag = reg_email.test(email);
            if (flag) {
                $("#email").css("border", "");
                $("#eemsg").html("");
            } else {
                $("#email").css("border", "1px solid red");
                $("#eemsg").html("邮箱格式不合法");
            }
            return flag;
        }

        //校验姓名
        function checkName() {
            //1.获取姓名的值
            var realname = $("#realname").val();
            //2.判断，给出提示信息
            var flag = true;
            if (realname.length == 0) {
                $("#realname").css("border", "1px solid red");
                $("#eemsg").html("不能为空");
                flag = false;
            } else {
                $("#realname").css("border", "");
                $("#eemsg").html("");
                flag = true;
            }

            return flag;

        }

        //校验手机号
        function checkTelephone() {
            //1.获取手机号码
            var telephone = $("#telephone").val();
            //2.定义正则手机号格式
            var reg_tel = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
            //3.判断，给出提示信息
            var flag = reg_tel.test(telephone);
            if (flag) {
                $("#telephone").css("border", "");
                $("#eemsg").html("");
            } else {
                $("#telephone").css("border", "1px solid red");
                $("#eemsg").html("手机号码格式不合法");
            }
            return flag;
        }


        $(function () {
            //当表单提交时，调用所有的校验方法
            $("#updateForm").submit(function () {
                //1.发送数据到服务器
                // if(checkUsername()&&checkPassword()&&checkEmail()&&checkName()&&checkBirth()&&checkCode()&&checkTelephone()){
                // if (checkUsername() && checkPassword() && checkEmail()&& checkTelephone()&&checkName()) {
                if(checkUsername()&&checkPassword()&&checkEmail()&&checkTelephone()&&checkName()){
                    // alert("1111")
                    // return  true;
                    // 校验通过，发送ajax请求，提交表单数据 username=zhangsan&&password=111
                    // alert(111)
                    $.post("user/updateUser", $(this).serialize(), function (data) {
                        //处理服务器响应数据 data {flag:false,errorMsg:“失败”}
                        if (data.flag) {
                            //修改成功，跳转成功页面
                            location.href = "userhome.html";
                        } else {
                            //注册失败,给errormsg添加提示信息
                            $("#eemsg").html(data.errorMsg);
                        }
                    });
                }
                //2.跳转页面
                return false;
                //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
            });

            //当某一个组件失去焦点时，调用对应的校验方法
            $("#username").blur(checkUsername);
            $("#password").blur(checkPassword);
            $("#email").blur(checkEmail);
            $("#realname").blur(checkName);
            $("#telephone").blur(checkTelephone);


        });
    </script>
    <body>
        <!--        1.页眉-->
        <!--引入头部-->
        <div id="header"></div>

        <!--        2.主体-->
        <div class="container">
            <div class="row jx">
                <img src="img/icon_7.jpg">
                <span>个人中心</span>
            </div>
            <div class="col-md-9">
                <form action="" style="width: 400px; margin: 15px 380px 10px 380px" id="updateForm">
                    <div class="form-group">
                        <label for="username">用户名：</label> <input type="text"
                                                                  class="form-control" id="username" name="username"
                                                                  value=""
                                                                  readonly="readonly"/>
                    </div>

                    <div class="form-group">
                        <label for="email">邮箱：</label> <input type="text"
                                                              class="form-control" id="email" name="email"
                                                              value="" readonly="readonly"
                    >
                    </div>
                    <div class="form-group">
                        <label for="realname">真实姓名：</label> <input type="text"
                                                                   class="form-control" id="realname" name="realname"
                                                                   value="" readonly="readonly"
                    >
                    </div>
                    <div class="form-group">
                        <label for="telephone">手机号码：</label> <input type="text"
                                                                    class="form-control" id="telephone" name="telephone"
                                                                    value="" readonly="readonly"
                    >
                    </div>

                    <div class="form-group">
                        <label>性别：</label>
                        <input id="sex1" type="radio" name="sex" value="male"/>男
                        <input id="sex2" type="radio" name="sex" value="female"/>女
                    </div>


                    <div class="form-group">
                        <label for="birthday">出生日期</label> <input type="date" class="form-control" id="birthday"
                                                                  name="birthday" value="" readonly="readonly"/>
                    </div>


                    <div class="form-group" style="text-align: center">
                        <span id = "eemsg" style="color: red"></span><br><br>
                        <input class="btn btn-primary" id="update_sub" type="button" value="修改信息"/>
                        <input class="btn btn-default" type="submit" disabled="disabled" id="usub" value="提交修改"/>
                    </div>
                </form>
            </div>
            <div class="col-md-3" style="padding-top: 20px">
                <div class="form-group" style="text-align: center">
                    <input class="btn btn-primary" value="上传作品"/>
                </div>
            </div>

        </div>


        <!--        3.页脚-->
        <!--导入底部-->
        <div id="footer"></div>

    </body>
</html>